<template>
  <div class="qPwdRevise">
    <Modal
      v-model="show"
      width="590"
      :closable="false"
      :mask-closable="false"
      :styles="{top: '200px'}">
      <div slot="header">
        <span style="font-size: 16px;color: #2B2C2F">修改密码</span>
        <img style="width: 20px;height: 20px;float: right;cursor: pointer" src="../assets/close.png" @click="close"  />
      </div>
      <div class="revise-form">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
          <FormItem label="旧密码" prop="old">
            <Input size="large" style="width: 470px;" v-model="formValidate.old" placeholder="请输入当前密码" />
          </FormItem>
    
          <FormItem label="新密码" prop="new">
            <Input size="large" style="width: 470px;" v-model="formValidate.new" placeholder="请输入新密码" />
          </FormItem>
    
          <FormItem label="确认密码" prop="confirm">
            <Input size="large" style="width: 470px;" v-model="formValidate.confirm" placeholder="请重复输入新密码" />
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button  type="primary" @click="handleSubmit('formValidate')">确认修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  
  export default {
    name: 'qPwdRevise',
    props: ['show'],
    data() {
      return {
        formValidate: {
          old: '',
          new: '',
          confirm: ''
        },
        ruleValidate: {
          old: [
            { required: true, message: '请填写当前密码', trigger: 'blur' }
          ],
          new: [
            { required: true, message: '请填写新密码', trigger: 'blur' }
          ],
          confirm: [
            { required: true, message: '请填写确认密码', trigger: 'blur' }
          ]
        }
      }
    },
    filters: {},
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交成功!');
          } else {
          //  this.$Message.error('请先输入信息!');
            this.$emit('on-close')
            setTimeout( ()=> {
             // this.$emit('on-success')
              this.$emit('on-error')
            }, 1000)
           
        
          }
        })
      },
      close () {
          this.$emit('on-close')
      }
      
      
    },
    components: {},
    mounted: function () {
    },
  }
</script>

<style lang="less">
  .revise-form {
    .ivu-form-item-label {
      font-size: 16px;
    }
  }
 
</style>
